<template>
	<view class="content" style="height: 100%;">
		<!-- 搜索-->
		<view class="search">
			<span class="span">找楼盘：</span>
			<input type="text" class="put" v-model="searchValue" placeholder="请输入楼盘关键字查询">
			<button class="btm" @click="search"> 搜索</button>
		</view>
		<!--轮播-->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in  background" v-bind:key="index">
					<view class="swiper-item">
						<img class="swiperImg" :src="item.imgUrl" @click="bannerLink(item)" alt="">
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--nav-->
		<scroll-view class="wraps" scroll-x="true">
			<ul style="padding-top: 8px;">
				<li class="liNav">
					<div class="liCon" @click='linkHref(1)'>
						<img src="https://gateway.yijushenyang.com/static/index/zc.png" style="width: 30px; height: 30px;"
							mode="widthFix" alt="">
					</div>
					<div class="txt" @click='linkHref(1)'>逸居人才公寓</div>
				</li>
				<li class="liNav">
					<div class="liCon" @click='linkHref(2)'>
						<img src="https://gateway.yijushenyang.com/static/index/hd.png" style="width: 30px; height: 30px;"
							mode="widthFix" alt="">
					</div>
					<div class="txt">活动简介</div>
				</li>
				<li class="liNav">
					<div class="liCon" @click='linkHref(3)'>
						<img src="https://gateway.yijushenyang.com/static/index/bui.png" style="width: 30px; height: 30px;"
							mode="widthFix" alt="">
					</div>
					<div class="txt">参展楼盘</div>
				</li>
				<li class="liNav">
					<div class="liCon" @click='linkHref(4)'>
						<img src="https://gateway.yijushenyang.com/static/index/zc.png" style="width: 30px; height: 30px;"
							mode="widthFix" alt="">
					</div>
					<div class="txt">优惠政策</div>
				</li>
				<li class="liNav">
					<div class="liCon" @click='linkHref(5)'>
						<img src="https://gateway.yijushenyang.com/static/index/js.png" style="width: 30px; height: 30px;"
							mode="widthFix" alt="">
					</div>
					<div class="txt" @click='linkHref(5)'>房贷计算器</div>
				</li>
				<li class="liNav">
					<div class="liCon" @click='linkHref(6)'>
						<img src="https://gateway.yijushenyang.com/static/index/yh.png" style="width: 30px; height: 30px;"
							mode="widthFix" alt="">
					</div>
					<div class="txt" @click='linkHref(6)'>联动优惠</div>
				</li>

			</ul>

		</scroll-view>

		<!-- <div class="poFixed" @click='linkHrefEw'>
			<li class="liNav" style="width: 100%;">
				<div class="liCon">
					<img src="https://gateway.yijushenyang.com/static/index/ewm.png" style="width: 24px; height: 24px;"  mode="widthFix" alt="">
				</div>
				<div class="txt" style="width: 100%;">优惠二维码</div>
			</li>
		</div> -->
		<!--实时政策-->
		<div class="zc" @click='linkZC'>
			<div class="zcTli">实时政策</div>
			<div class="zcCom">
				<view class="zcTran">
					<span>{{actList[0].bigTitle}}</span>
					<span>{{actList[0].bigTitle}}</span>
				</view>
			</div>
		</div>
		<!--参展楼盘-->
		<view class="listCon">
			<view class="title">
				<view class="display">
					<i class="i"></i>
					<span class="tit">参展楼盘</span>
				</view>
				<view class="des">点击查看详细介绍</view>
			</view>

			<ul class="ul" style="padding: 0;">
				<li class="li" v-for="(item , i) in list" v-bind:key="i" @click='linkDetail(item)'>
					<view class="liWrap">
						<div class="img" style="position: relative;">
							<img :src="item.showImg" class="img" alt="">
							<div class="imgPo" @click.stop="lookTV(item)"
								v-if="item.appId && item.path && item.broadcastNum">
								<img src="https://gateway.yijushenyang.com/static/index/playiconred.gif"
									style="width: 14px;height: 14px;" alt="">
							</div>
						</div>

						<view class="msg">
							<view class="poCur">{{item.nickname}}</view>
							<view class="p1">
								<span class="b" v-bind:key="ind" v-for="(obj, ind) in item.modelLabel">{{obj}}</span>
								<!-- <span class="b">写字楼</span> -->
								<!-- <span class="b">写字楼</span> -->
							</view>
							<view class="p1"><span class="bRed">{{item.average}}/m²</span></view>
							<view class="p1">
								<span class="b">{{item.area}}</span>
								<span class="b">{{item.street}}</span>
								<span class="b">{{item.address}}</span>
							</view>
							<view class="p1 p2" v-if="item.label.length>0">
								<span class="bCur" v-bind:key="ind" v-for="(obj, ind) in item.label">{{obj}}</span>
							</view>
							<view class="p1">销售电话： <span class="b">{{item.salePhone}}</span></view>
						</view>
					</view>

				</li>
				<div class="load" v-show="isLoadDowning == 1">
					<img class="loadImg" src="https://gateway.yijushenyang.com/static/img/loading.png" alt="">
					<span>加载中</span>
				</div>
				<div class="load" v-show="isLoadDowning == 2">
					<span>没有更多了～</span>
				</div>
			</ul>
		</view>
	</view>
</template>

<script>
	import config from '../../config.js';
	export default {
		data() {
			return {
				isLoadDowning: 0,
				loadBottom: true,
				pageNum: 1,
				pageSize: 10,
				actList: [],
				searchValue: "",
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 300,
				title: 'Hello',
				list: []
			}
		},
		onLoad() {
			this.imgsList()
			this.listApp()
			this.listZc()
			this.syFun()
		},
		onReachBottom() {
			if (this.loadBottom) {
				this.isLoadDowning = 1
				this.pageNum += 1;
				this.listApp()
			} else {
				this.isLoadDowning = 2
			}
			console.log('触底了')
		},
		
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '逸居盛京',
				path: '/pages/home/index',
				imageUrl: "",
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: '逸居盛京',
				path: '/pages/home/index',
				imageUrl: "",
			}
		},
		methods: {
			syFun() {
				uni.request({
					url: config.host + 'system/plate/app/sy',
					success: (res) => {

					}
				})
			},
			// 政策
			linkZC() {
				console.log(1)
				uni.navigateTo({
					url: '/pages/policy/detail?id=' + this.actList[0].id
				})
			},
			linkHrefEw() {
				uni.navigateTo({
					url: '/pages/uqrCode/index'
				})
			},
			search() {
				uni.navigateTo({
					url: '/pages/build/index?value=' + this.searchValue
				})
			},
			listZc() {
				uni.request({
					url: config.host + 'system/article/app/listApp', //仅为示例，并非真实接口地址。
					success: (res) => {
						this.actList = res.data.rows
					}
				});
			},
			// list 请求
			listApp() {
				let pream = {}
				pream.pageNum = this.pageNum,
					pream.pageSize = this.pageSize,
					uni.request({
						url: config.host + 'system/plate/app/listApp',
						data: pream,
						success: (res) => {
							// this.actobj = res.data.rows[0]
							for (var i = 0; i < res.data.rows.length; i++) {
								if (res.data.rows[i].label) {
									res.data.rows[i].label = res.data.rows[i].label.split(",")
								}
								if (res.data.rows[i].modelLabel) {
									res.data.rows[i].modelLabel = res.data.rows[i].modelLabel.split(",")
								}
							}
							this.list = this.list.concat(res.data.rows)
							this.isLoadDowning = 0
							if (this.list.length < res.data.total) {
								console.log(res.data.rows);
								console.log(this.list)
								console.log(222)
							} else {
								console.log(111)
								this.isLoadDowning = 2
								this.loadBottom = false
							}
						}
					});
			},
			// banner  跳转
			bannerLink(item) {
				console.log(!item.hpptUrl)
				if (!item.hpptUrl) {
					return
				}
				if (item.urlType == 1) {
					uni.navigateTo({
						url: item.hpptUrl
					})
				} else {
					uni.navigateTo({
						url: '/pages/webView/webView?url=' + item.hpptUrl
					})
				}
			},
			// banner 请求
			imgsList() {
				uni.request({
					url: config.host + 'system/imgs/app/list?identifier=banner',
					success: (res) => {
						// this.actobj = res.data.rows[0]
						this.background = res.data.data
						console.log(res.data.data);
					}
				});
			},
			// 看直播
			lookTV(item) {

				uni.navigateToMiniProgram({
					// appId: "wx74767bf0b684f7d3",
					// path: "pages/main/liveRoom/index?anchorUid=813535483", 
					appId: item.appId,
					path: item.path + item.broadcastNum,
					success(res) {
						// 打开成功 
					},
					complete: (res) => {
						console.log('直播间信息', res)
					},
				})
			},
			linkDetail(item) {
				uni.navigateTo({
					url: '/pages/build/detail?id=' + item.plateId
				})
			},
			linkHref(num) {
				if (num == "2") {
					uni.navigateTo({
						url: '/pages/activity/index'
					})
				} else if (num == "3") {
					uni.navigateTo({
						url: '/pages/build/index'
					})
					// uni.switchTab({
					// 	url: '/pages/build/index'
					// })
				} else if (num == "4") {
					uni.navigateTo({
						url: '/pages/policy/index'
					})
				} else if (num == "5") {
					uni.navigateTo({
						url: '/pages/number/index'
					})
				} else if (num == "6") {
					uni.navigateTo({
						url: '/pages/linkAct/index'
					})
				} else if (num == "1") {
					uni.navigateTo({
						url: '/pages/home/index'
					})
				}

			},
			dianji() {

				// 注意需要在真机调试查看
				uni.getChannelsLiveInfo({
					finderUserName: 'sphbiMGKyhx8Lp8',
					success: (res) => {
						console.log('直播间信息', res)
						uni.openChannelsLive({
							finderUserName: 'sphbiMGKyhx8Lp8',
							feedId: res.feedId,
							nonceId: res.nonceId,
							success: (res) => {
								console.log('打开直播', res)
							}
						})
					},
					fail: (res) => {
						console.log('直播间信息', res)
					},
					complete: (res) => {
						console.log('直播间信息2', res)
					},
				})
			},
		}
	}
</script>

<style>
	.page {
		height: 100%;
		position: relative;
		/*设置高度100%，达到满屏状态*/
	}

	.imagebox {
		display: flex;
		height: 100%;
		/*重点，铺满全屏*/
		justify-content: center;
		align-items: center;
	}

	.load {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 10px;
	}

	.loadImg {
		margin-right: 10px;
		width: 20px;
		height: 20px;
		animation: animation 3s linear infinite;
	}

	.load span {
		color: #999;
		font-size: 14px;
	}

	@keyframes animation {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.imgPo {
		position: absolute;
		bottom: 8px;
		left: 10px;
		width: 24px;
		height: 24px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search {
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
		height: 52px;
		background-color: #fff;
	}

	.search .span {
		font-size: 14px;
		font-weight: bold;
		color: #666;
		width: 60px;
	}

	.search .btm {
		width: 60px;
		background-color: #f5b341;
		height: 32px;
		border-radius: 26px;
		line-height: 32px;
		text-align: center;
		color: #fff;
		margin-left: 5px;
		font-size: 14px;
		border: 0;
	}

	.search .put {
		box-sizing: border-box;
		padding-left: 12px;
		flex: 1;
		border: 1px solid #ccc;
		border-radius: 18px;
		height: 32px;
		font-size: 14px;
	}

	/*banner*/
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 200px;
	}

	.swiper-item {
		display: block;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.swiperImg {
		width: 100%;
		height: 200px;
	}

	/*实时政策*/
	.zc {
		padding: 0 8px;
		box-sizing: border-box;
		background-color: #f6f6f5;
		height: 24px;
		border-radius: 4px;
		line-height: 24px;
		margin: 0px 10px;
		width: 98%;
		display: flex;
		justify-content: center;
	}

	.zcTli {
		width: 64px;
		color: #000;
		font-size: 14px;
		font-weight: bold;
	}

	.zcCom {
		white-space: nowrap;
		flex: 1;
		font-size: 14px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.zcTran {
		width: fit-content;
		animation: rotate1 20s linear infinite;
	}

	@keyframes rotate1 {
		from {
			transform: translate(0, 0);
		}

		to {
			transform: translate(-50%, 0px);
		}
	}


	/** list***/
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.zhibo {
		position: absolute;
		top: 40px;
		right: 30px;
		width: 100px;
		height: 35px;
		border-radius: 8px;
		background-color: bisque;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.listCon {
		height: 100%;
		padding: 10px;
		width: 100%;
		box-sizing: border-box;
		/*设置高度100%，达到满屏状态*/
	}


	.ul {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		word-wrap: break-word;
	}

	.li1 {
		margin-top: 8px;
		width: 50%;
	}

	.li {
		position: relative;
		background-color: #fff;
		width: 100%;
		border-bottom: 1px solid #f0f0f0;
	}

	.poCur {
		color: #000;
		font-size: 20px;
		font-weight: bold;
	}

	.li .liWrap {
		padding: 15px 10px 15px 10px;
		display: flex;
	}

	.li .img {
		display: block;
		margin: 0 auto;
		width: 140px;
		height: 140px;
		border-radius: 8px;
	}

	.li .msg {
		padding-top: 0px;
		margin-left: 10px;
		flex: 1;
		color: #999;
	}

	.li .msg .p1 {
		font-weight: 300;
		margin-top: 4px;
		font-size: 12px;
	}

	.li .msg .p2 {
		height: 17px;
		max-width: 190px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.li .msg .b {
		font-weight: bold;
		color: #333;
		font-size: 12px;
		margin-right: 5px;
	}

	.li .bCur {
		padding: 0px 5px;
		border-radius: 8px;
		background-color: #FF953F;
		color: #fff;
		margin-right: 3px;
		white-space: nowrap;
		display: inline-block;
	}

	.li .bRed {
		color: #e1302c;
		font-size: 18px;
		font-weight: bold;
	}

	.title {
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
		font-size: 18px;
		color: #8f8f94;
	}

	.display {
		display: flex;
		align-items: center;
	}

	.i {
		margin-right: 8px;
		display: inline-block;
		height: 16px;
		width: 4px;
		background-color: #ff0202;
	}

	.tit {
		color: #333;
		font-size: 18px;
	}

	.des {
		margin-left: 10px;
		font-size: 14px;
		color: #999999;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	/**nav**/
	.wrap {
		background-color: #fff;
		padding-top: 8px;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		word-wrap: break-word;
	}

	.wraps {
		background-color: #fff;
		width: 100%;
		white-space: nowrap;
	}

	.wraps ul li {
		display: inline-block;
	}

	.liNav {
		margin-bottom: 10px;
		width: 20%;
		/* justify-content: center;
		align-items: center;
		display: flex; */
	}

	.liNav .liCon {
		justify-content: center;
		align-items: center;
		display: flex;
		margin: 0 auto;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: linear-gradient(90deg, #FDD900 0%, #FF953F 100%);
	}

	.liNav .txt {
		margin-top: 5px;
		text-align: center;
		color: #333;
		font-size: 12px;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.poFixed {
		z-index: 99;
		position: fixed;
		bottom: 10px;
		right: 5px;
		width: 80px;
		height: 100px;
	}
</style>